{% extends "Base.html" %}v
{% load static %}
{% block pagetitle %} 购票{% endblock %}
{% block paget5 %}active{% endblock %}
{% block page5 %}<span class="sr-only">(current)</span>{% endblock %}

{% block content %}
    <title>座位预定</title>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){

                var seat_num ;
                var total_bill      = 0 ;
                var pricePerTicked  = 30;
                var maximumSeats    = 6;

                $('#bookNowButton').hide();
                $('.seat').each(function() {
                    var column_num = parseInt( $(this).index() ) + 1;
                    var row_num = parseInt( $(this).parent().index() )+1;
                    seat_num = row_num+"-"+column_num ;
                    $(this).text(seat_num);
                    $(this).addClass("seat"+seat_num);
                });

                $("#seats .seat").click(function() {
                        $('#errMsg').html('');
                        if($(this).hasClass('select')){
                            $(this).removeClass('select');
                            $(this).css('background-color','#D8D8D8');

                            var currentSeatClass = $(this).attr('class').split(' ')[1];

                            console.log(currentSeatClass);
                             $( "#selected_seat ."+currentSeatClass ).remove();

                        }else if($(".your_selected_seat").length<maximumSeats && !$(this).hasClass('select')){ // 检查预定的座位数目是否超出限制
                            $(this).css('background-color','#71DCAA');
                            $(this).addClass("select");

                            {#.valueOf(name)#}
                            var column_num = parseInt( $(this).index() ) + 1;
                            var row_num = parseInt( $(this).parent().index() )+1;
                            $( "#selected_seat" ).append("<span class='your_selected_seat seat"+row_num+"-"+column_num+" '> 座位号: <b style='color:#EAABFF'>" + row_num+"-"+column_num +"</b> </br></span>");
                        }else {

                        }

                        if($(".your_selected_seat").length){
                            $('#bookNowButton').fadeIn(1000);
                        }else {
                            $('#bookNowButton').fadeOut(1000);
                        }
                        //计算总价
                     var a=parseInt($(".your_selected_seat").length)
                        total_bill = $(".your_selected_seat").length * pricePerTicked;
                        $('#shuliang').val(a);
                        $('#total > span').html(total_bill);
                });


    //}


});
</script>
<style>
body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    background: #ffffff;
}



#screen{
    display: block;
    width: 50%;
    color: red;
    font-weight: bold;
    background-color: #FFFFFF;
    border: 3px solid #af1313;
    text-align: center;
    margin: 10px auto 20px auto;
}
#seats{
    border: 1px solid green;
    width: 50%;
    margin: 0 auto;
    padding: 10px;
    background: white;
}
.seat {
    float: left;
    width: 5%;
    box-sizing: border-box;
    color: #676767;
    padding: 1px;
    height: 40px;
    background: #D8D8D8;
    border: 1px solid #979797;
    margin: 0.8%;
    border-bottom: 3px solid #F35E4F;
    cursor: pointer;
}
.seatsRaw {
    display:inline-block;
    width: 100%;
}
#booking_desc {
    width: 50%;
    /* border: 1px solid red; */
    background-color: #3C3636;
    color: #FAFAFA;
    margin: 30px auto;
    padding: 10px;
    display: table;
    }
.booking_left, .booking_right {
    width:100%;
    float:left;
    }
#total span {
    font-size: 16px;
    color: burlywood;
    }
#errMsg{
    color: #FF7777;
    }
/*end booking*/
</style>
    <body>
            <div style="width:100%;margin: 0 auto;">
            <span id='screen'>
             <p>
                一号厅
            </p >
            </span>
            <div id="seats">
                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>

                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>

                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>

                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>

                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>

                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>
                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>
                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                </div>

            </div>

              <div id="booking_desc">
                <div class="booking_left">
                    <p>最多可选择六个座位，如需更多请联系前台</p>
                    <p style="color: #FBBC53;font-weight: bold; font-size: larger;">已选择: </p >
                    <div id="selected_seat"></div>
                    <br>

                    <div id="errMsg"></div>
                </div>

                <div class="booking_right">
                    <form action="bill" method="post">
                        {% csrf_token %}
                        影片名:<input type="text"  name="moviename"/><br>
                        购买数量:<input type="number" id="shuliang" name="num" value="0"/>
                        <input type="submit" value="确定">
                    </form>
                    单价: 30.00 元
                    <p>已选择 {{ b }} 影片; 购买数量 {{ a }} 张;总价{{ c }}元</p>
{#                    <input type="submit" value="支付" style="width:250px;height:30px">#}
                    <br><br>
                    <div id="total">总价：<span> 0 </span>元</div>
                </div>
                <div style="width: 100%" align="center">
                    <button id="bookNowButton" style="font-size: 20px" type="button">支付</button>
                </div>
             </div>




        </div>
</body>

    <br>
    <div align="center">

    </div>

    <hr>

    <div align="center">

    </div>

{% endblock %}